<template>
    <div class="LegalPersonPhoto">
        <mt-header :title="longTitle">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <process :color="color"></process>
        <div class="LegalPersonTip">
            <div class="LegalPerson">法人身份证原件照片</div>
            <div class="pictureTips">*请拍摄或上传法人身份证原件照片请确保图片清晰，四角完整</div>
            <div class="PeoplePictureBox">
                <uploadImg :img-url="imgurl1" @change="change1" @getImgData="getImgData1"></uploadImg>
                <uploadImg :img-url="imgurl2" @change="change2" @getImgData="getImgData2"></uploadImg>
                <uploadImg :img-url="imgurl3" @change="change3" @getImgData="getImgData3"></uploadImg>
            </div>

        </div>
        <com-button btnClass="next-btn" @btn-click="goTo"
                    :disabled="nextBtnDisabled">下一步</com-button>
    </div>
</template>
<!--:http-request="httpRequest"-->
<script>
    import ComButton from '@/components/com-button.vue'
    import process from '@/components/process.vue'
    import ShowListInput from '@/components/ShowListInput.vue'
    import Popup from '@/components/Popup.vue'
    import picker from '@/components/picker.vue'
    import ShowList from '@/components/ShowList.vue'
    import uploadImg from '@/components/Upload-img.vue'
    import {mapState,mapMutations} from 'vuex'
    import {Tools} from '@/lib/tools'
    import {AXIOS_POST} from '@/lib/axios'
    import router from "@/router"
    import {LEGALPERSONPHOTO_NEXT_BUTTON_CHECK} from '../store/types'


    export default {
        name: "legalpersonphoto",
        components: {
            process,
            ShowListInput,
            Popup,
            picker,
            ShowList,
            uploadImg,
            ComButton
        },
        data() {
            return {
                ButtonNext: '下一步',
                needData: '手机号',
                color: {color: '#2dbbfd'},
                longTitle: '法人信息验证',

            }
        },
        computed: {
            ...mapState('LegalPersonPhoto', ['PeoplePictures', 'nextBtnDisabled',
                'SelfPortraitIDCardPath','SelfPortraitIDCardSize','nationalEmblemIDCardPath','nationalEmblemIDCardSize'
                ,'IdentityWitnessIDCardPath','IdentityWitnessIDCardSize','imgurl1','imgurl2','imgurl3'])
        },
        methods: {
            ...mapMutations('LegalPersonPhoto',[LEGALPERSONPHOTO_NEXT_BUTTON_CHECK]),
            change1 ( e ) {
                this.$store.state.LegalPersonPhoto.imgurl1 = e
            },
            change2 ( e ) {
                this.$store.state.LegalPersonPhoto.imgurl2 = e
            },
            change3 ( e ) {
                this.$store.state.LegalPersonPhoto.imgurl3 = e
            },

            getImgData1(data){
                this.$store.state.LegalPersonPhoto.SelfPortraitIDCardPath=data.file_path;
                this.$store.state.LegalPersonPhoto.SelfPortraitIDCardSize=data.file_size;
                this.LEGALPERSONPHOTO_NEXT_BUTTON_CHECK()
            },
            getImgData2(data){
                this.$store.state.LegalPersonPhoto.nationalEmblemIDCardPath=data.file_path;
                this.$store.state.LegalPersonPhoto.nationalEmblemIDCardSize=data.file_size;
                this.LEGALPERSONPHOTO_NEXT_BUTTON_CHECK()
            },
            getImgData3(data){
                this.$store.state.LegalPersonPhoto.IdentityWitnessIDCardPath=data.file_path;
                this.$store.state.LegalPersonPhoto.IdentityWitnessIDCardSize=data.file_size;
                this.LEGALPERSONPHOTO_NEXT_BUTTON_CHECK()
            },
            goTo(){
                router.push( 'Authentication' )
            }


        }
    }
</script>

<style scoped>

    /*.el-icon-plus1 {*/
    /*-webkit-transform: scale(.8, .8);*/
    /*transform: scale(.8, .8);*/
    /*}*/


    .LegalPersonTip {
        padding-left: .93rem;
        padding-right: .93rem;
        background: white;
        padding-bottom: 1.93rem;
        font-size: .875rem;
    }

    .LegalPerson {
        text-align: left;
        padding-bottom: .875rem;
        padding-top: .875rem;
        border-bottom: 1px solid #e0e3ea;
    }

    .pictureTips {
        padding-bottom: .875rem;
        padding-top: .875rem;
        color: #80898d;
    }

    /*input::-webkit-input-placeholder {*/
    /*color: #e0e3ea;*/
    /*}*/
    .PeoplePictureImg {
        /*padding-top: .75rem;*/
        width: 145px;
        height: 96px;
        background-size: 100% 100%;
        margin: 0 auto;
        background-image: url("../assets/PersonPhoto/u57.png");
    }
</style>